<template>
    <div class="home-slides">
        <div class="setting-operation">
            <div class="setting-operation-left">
                <el-button type="primary" @click="handleAddSlides">添加轮播</el-button>
            </div>
        </div>
        <!-- 轮播列表 -->
        <RuifoxTable
            :default-index="true"
            v-model:tableData="slidesList"
            v-model:fieldList="fieldList"
            :canDrag="true"
            @handleSort="handleSort"
        >
            <template #image='{element}'>
              <div class="table-td-normal td-img">
                <img :src="element.image" alt="">
              </div>
            </template>
            <template #type='{element}'>
              <div class="table-td-normal">{{typeList.find(item => {return item.value === element.type}).label}}</div>
            </template>
            <template #enable='{element}'>
              <el-switch
                class="unmover"
                v-model="element.enable"
                :before-change="changeEnable.bind(this,element)"
                :loading="optionLoading&&switchParams.id === element.id"
                :active-value="1"
                :inactive-value="0"
              />
            </template>
            <template #options='{element}'>
              <div class="table-td-option">
                <el-button type="primary" class="unmover" link @click="handleEditSlides(element)">修改</el-button>
                <el-button type="primary" class="unmover" link @click="handleRemoveSlides(element)">删除</el-button>
              </div>
            </template>
        </RuifoxTable>
        <el-dialog
            v-model="isShowSlidesForm"
            :title="editWay === 1 ? '添加轮播' : '修改轮播'"
            width="650px"
        >
            <div class="inner-form-dialog">
                <el-form
                    :model="slidesForm"
                    label-width="100px"
                    label-position="left"
                    ref="slidesFormRef"
                >
                <el-form-item label="轮播图片">
                    <div class="form-img" @click="showImgUpload = true">
                        <div class="has-img" v-if="slidesForm.image">
                            <img :src="slidesForm.image" alt="" />
                            <span @click.stop="handleRemoveImg">
                                <el-icon><Delete /></el-icon>
                            </span>
                        </div>
                        <el-icon v-else><Plus /></el-icon>
                    </div>
                </el-form-item>
                <el-form-item label="样式类型">
                    <el-radio-group v-model="slidesForm.type">
                    <el-radio :label="item.value" v-for="item in typeList" :key="item.value">{{item.label}}</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="链接">
                    <el-input v-model="slidesForm.link"></el-input>
                </el-form-item>
                <el-form-item label="前景图" v-show="slidesForm.type === 3">
                    <div class="form-img" @click="showImgUploadFront = true">
                        <div class="has-img" v-if="slidesForm.front_image">
                            <img :src="slidesForm.front_image" alt="" />
                            <span @click.stop="handleRemoveFrontImg">
                                <el-icon><Delete /></el-icon>
                            </span>
                        </div>
                        <el-icon v-else><Plus /></el-icon>
                    </div>
                </el-form-item>
                <el-form-item label="前景图位置" v-show="slidesForm.type === 3">
                    <el-select v-model="slidesForm.page_position">
                    <el-option
                        v-for="item in pagePosition"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                    </el-select>
                </el-form-item>
                </el-form>
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="isShowSlidesForm = false">取消</el-button>
                    <el-button type="primary" @click="handleSubmitSlidesForm(slidesFormRef)" :loading="submitLoading">
                    确认
                    </el-button>
                </span>
            </template>
        </el-dialog>
        <!-- 图片上传  -->
        <FilesUpload v-if="showImgUpload" v-model:showDialog="showImgUpload" :isPublic="true" :modelId="1" :limit="1" @getFileList="insertImage" :isToJpg="true"></FilesUpload>
        <!-- 前景图上传  -->
        <FilesUpload v-if="showImgUploadFront" v-model:showDialog="showImgUploadFront" :isPublic="true" :modelId="1" :limit="1" @getFileList="insertFrontImage" :isToJpg="false"></FilesUpload>
    </div>
</template>
<script setup>
import { reactive, ref, onMounted } from 'vue'
import { Delete, Plus } from '@element-plus/icons-vue'
import { FilesUpload } from "@ruifox-cms/components"
import { ElMessageBox } from 'element-plus'
const typeList = ref([
    {
      value: 1,
      label: '图片'
    },
    {
      value: 3,
      label: '图片+前景图'
    }
])
const pagePosition = ref([
    {
      value: 'up',
      label: '上'
    },
    {
      value: 'down',
      label: '下'
    },
    {
      value: 'left',
      label: '左'
    },
    {
      value: 'center',
      label: '中'
    },
    {
      value: 'right',
      label: '右'
    },
])
const fieldList = ref([
    {
      title: '图片',
      name: 'image',
      showTextTip: true
    },
    {
      title: '样式类型',
      name: 'type',
    },
    {
      title: '链接',
      name: 'link',
      showTextTip: true
    },
    {
      title: '状态',
      name: 'enable',
    },
    {
      title: '操作',
      width: 150,
      fixed: 'right',
      name: 'options'
    }
])
/***** 添加or修改 *****/
const isShowSlidesForm = ref(false)
const editWay = ref(1)
const defaultSlidesForm = {
    image: '',
    type: 1,
    link: '',
    front_image: '',
    enable: 1,
    page_position: ''
}
const showImgUpload = ref(false)
const showImgUploadFront = ref(false)
const slidesForm = reactive(Object.assign({},defaultSlidesForm))
const slidesFormRef = ref()
const insertImage = (imgList) => {
    if(process.env.NODE_ENV === 'development') console.log(imgList)
    slidesForm.image = imgList[0].url
}
const insertFrontImage = (imgList) => {
    if(process.env.NODE_ENV === 'development') console.log(imgList)
    slidesForm.front_image = imgList[0].url
}
const handleAddSlides = () => {
    isShowSlidesForm.value = true
    Object.assign(slidesForm,defaultSlidesForm)
    editWay.value = 1
}
const handleRemoveImg = () => {
    slidesForm.image = ''
}
const handleRemoveFrontImg = () => {
    slidesForm.front_image = ''
}
// 提交添加或修改数据
const submitLoading = ref(false)
const handleSubmitSlidesForm = async (formEl) => {
    if (!formEl) return
    await formEl.validate((valid) => {
        if (valid) {
            submitLoading.value = true
            if(editWay.value === 1){
                // addSlides(slidesForm).then(res => {
                //     handleGetSlidesList()
                //     if(res.code === 20000){
                //         isShowSlidesForm.value = false
                //         submitLoading.value = false
                //         ElMessage({
                //         showClose: true,
                //         message: '添加成功',
                //         type: 'success',
                //         })
                //     }
                // }).catch(() => {
                //     submitLoading.value = false
                // })
            }else{
                // editSlides(slidesForm).then(res => {
                //     handleGetSlidesList()
                //     if(res.code === 20000){
                //         isShowSlidesForm.value = false
                //         submitLoading.value = false
                //         ElMessage({
                //         showClose: true,
                //         message: '修改成功',
                //         type: 'success',
                //         })
                //     }
                // }).catch(() => {
                //     submitLoading.value = false
                // })
            }
        }
    })
}

//获取轮播列表
const tableLoading = ref(false)
const slidesList = ref([])
const handleGetSlidesList = () => {
    tableLoading.value = true
    // getSlidesList(queryData).then(res => {
    //   slidesList.value = res.data
    //   tableLoading.value = false
    // })
    slidesList.value = [{
        id: 14,
        position: 7,
        image: "https://gxhospital.master228.netms.net/oss/20250106/111020633.jpg",
        type: 3,
        link: null,
        front_image: "http://gxhospital.1024199.foxtest.net/oss/20240717/151141436.png",
        page_position: "left",
        enable: 0
    }]
}
//拖拽排序
const handleSort = (e) => {
    if(e.to.className === e.from.className){
      let cId = slidesList.value[e.newIndex].id
      let bId = slidesList.value[e.newIndex - 1] ? slidesList.value[e.newIndex - 1].id : 0
      let pId = slidesList.value[e.newIndex + 1] ? slidesList.value[e.newIndex + 1].id : 0
      let sort_list = bId + ',' + cId + ',' + pId
      if(process.env.NODE_ENV === 'development') console.log(sort_list)
    //   sortSlides({class: queryData.code,ids: sort_list}).then((res) => {
    //     if(process.env.NODE_ENV === 'development') console.log(res.message)
    //   }).catch(() => {
    //     handleGetSlidesList()
    //   })
    }
}
// 修改状态
const switchParams = reactive({
    id: 1,
    enable: 1
})
const optionLoading = ref(false)
const changeEnable = (data) => {
    //改变状态
    switchParams.id = data.id
    switchParams.enable = data.enable ? 0 : 1
    optionLoading.value = true
    return new Promise((resolve,reject) => {
        console.log(resolve,reject)
    //   editSlidesEnable(switchParams).then((res) => {
    //     // 重新获取字段
    //     optionLoading.value = false
    //     if(res.code === 20000){
    //       ElMessage({
    //         showClose:true,
    //         message: '修改成功',
    //         type: 'success'
    //       })
    //       return resolve(true)
    //     }else{
    //       return reject(new Error('Error'))
    //     }
    //   })
    })
}
// 修改
const handleEditSlides = (data) => {
    isShowSlidesForm.value = true
    Object.assign(slidesForm,data)
    editWay.value = 0
}
//删除
const handleRemoveSlides = (data) => {
    if(process.env.NODE_ENV === 'development') console.log(data)
    ElMessageBox.confirm(
        '是否删除该条数据？删除后将无法恢复！',
        '删除确认',
        {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning',
        }
    ).then(() => {
    //   deleteSlides({id: data.id}).then(res => {
    //     if(res.code === 20000){
    //       ElMessage({
    //         showClose: true,
    //         message: '删除成功',
    //         type: 'success',
    //       })
    //     }
    //     handleGetSlidesList()
    //   })
    })
}
onMounted(() => {
    handleGetSlidesList()
})
</script>
<style scoped lang="scss">
.home-slides {
    .setting-operation {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
        .setting-operation-left {
            display: flex;
            gap: 10px;
            flex: 1;
        }
    }
}
.td-img img{
    height: 60px;
}
.form-img{
    height: 100px;
    width: 150px;
    border: 1px dashed $borderColor;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 10px;
    .has-img{
      height: 100%;
      width: 100%;
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      img{
        max-width: 100%;
        max-height: 100%;
      }
      span{
        display: none;
        position: absolute;
        right: 0;
        top: 0;
        background-color: $failColor;
        height: 20px;
        width: 20px;
        font-size: 18px;
        color: #fff;
      }
      &:hover{
        span{
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    } 
}
</style>